AngularJS ng-model Directive
ng-model directive HTML கட்டுப்பாடுகளின் (input, select, textarea) மதிப்பை பயன்பாட்டு தரவுடன் இணைக்கிறது.
குறிப்பு:
ng-model directive மூலம், நீங்கள் ஒரு உள்ளீட்டுப் புலத்தின் மதிப்பை AngularJS இல் உருவாக்கப்பட்ட ஒரு மாறிக்கு இணைக்கலாம்.
அடிப்படை உதாரணம்
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>இரு வழி இணைப்பு
இணைப்பு இரண்டு வழிகளிலும் செல்கிறது.
பயனர் உள்ளீட்டுப் புலத்திற்குள் மதிப்பை மாற்றினால், AngularJS பண்பும் அதன் மதிப்பை மாற்றும்:
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>View → Model
பயனர் உள்ளீட்டை மாற்றும்போது தரவு மாற்றம்
Model → View
தரவு மாறும்போது காட்சி தானாக புதுப்பிக்கப்படுகிறது
இரண்டு வழி
தானியங்கி ஒத்திசைவு இரு திசைகளிலும்
பயனர் உள்ளீட்டைச் சரிபார்க்கவும்
ng-model directive பயன்பாட்டு தரவுக்கான வகை சரிபார்ப்பை வழங்க முடியும் (number, e-mail, required):
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>மேலே உள்ள எடுத்துக்காட்டில், ng-show பண்புக்கூறில் உள்ள எக்ஸ்பிரஷன் true ஐத் திருப்பினால் மட்டுமே span காட்டப்படும்.
முக்கியமானது:
ng-model பண்புக்கூறில் உள்ள பண்பு இல்லாவிட்டால், AngularJS உங்களுக்காக ஒன்றை உருவாக்கும்.
பயன்பாட்டு நிலை
ng-model directive பயன்பாட்டு தரவுக்கான நிலையை வழங்க முடியும் (valid, dirty, touched, error):
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>| நிலை | விளக்கம் | மதிப்பு |
|---|---|---|
| $valid | உள்ளீடு செல்லுபடியாகுமா | true / false |
| $invalid | உள்ளீடு செல்லாததா | true / false |
| $dirty | பயனர் மதிப்பை மாற்றியுள்ளாரா | true / false |
| $pristine | உள்ளீடு இன்னும் மாற்றப்படவில்லையா | true / false |
| $touched | புலம் தொடப்பட்டதா | true / false |
| $untouched | புலம் தொடப்படவில்லையா | true / false |
CSS வகுப்புகள்
ng-model directive அவற்றின் நிலையைப் பொறுத்து HTML உறுப்புகளுக்கான CSS வகுப்புகளை வழங்குகிறது:
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>படிவ புலத்தின் நிலையைப் பொறுத்து, ng-model directive பின்வரும் வகுப்புகளைச் சேர்க்கிறது/அகற்றுகிறது:
ng-empty / ng-not-empty
புலம் காலியாக உள்ளதா இல்லையா
ng-touched / ng-untouched
புலம் தொடப்பட்டதா இல்லையா
ng-valid / ng-invalid
புலம் செல்லுபடியாகுமா இல்லையா
ng-dirty / ng-pristine
புலம் மாற்றப்பட்டதா இல்லையா
ng-pending
சரிபார்ப்பு நடந்து கொண்டிருக்கிறது
நடைமுறை உதாரணங்கள்
பயனர் பெயர்
<input type="text"
ng-model="user.name"
required>மின்னஞ்சல்
<input type="email"
ng-model="user.email"
required>தேர்வுப் பட்டியல்
<select ng-model="user.gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select>உரைப் பகுதி
<textarea ng-model="message"
rows="4">
</textarea>